<template>
    <van-icon @click="back" class="back-arrow" name="arrow-left" />
  <!-- 收货人 -->
  <div class="form">
    <div class="addresstext">顾客姓名：</div>
    <input type="text" v-model="name" class="input" placeholder="请填写姓名" />
  </div>
  <!-- 手机号码 -->
  <div class="form">
    <div class="addresstext">手机号码：</div>
    <input type="number" v-model="phone" class="input" placeholder="请输入手机号码" />
  </div>

  <!-- 选择地区 -->
  <van-field
    v-model="result"
    class="select"
    is-link
    readonly
    name="area"
    label="所在地区:"
    placeholder="请选择省市区"
    @click="showArea = true"
  />
  <van-popup v-model:show="showArea" position="bottom">
    <van-area
        style="padding-right:20px;font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;"
      :area-list="areaList"
      @confirm="onConfirm"
      @cancel="showArea = false"
    />
  </van-popup>

  <!-- 详细地址 -->
  <div class="form">
    <div class="addresstext">详细地址：</div>
    <textarea rows="5" class="textarea" v-model="detail" placeholder="请输入详细地址"></textarea>
  </div>

  <van-button class="bigbtn" type="primary" size="large" @click="submitaddress">提交</van-button>

  <div class="box"></div>
</template>

<script>
import { areaList } from "@vant/area-data";
import { ref } from "vue";
import { Toast } from 'vant';
export default {
  setup() {
    const name = ref("");
    const phone = ref("");
    const result = ref("");
    const detail = ref("");
    const showArea = ref(false);
    const onConfirm = (areaValues) => {
      showArea.value = false;
      result.value = areaValues
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      console.log(result._value);
    };
    Toast.setDefaultOptions({ duration: 1000 });
    // 提交
    const submitaddress = () => {
        if(name.value === '') {Toast.fail('姓名不能为空');}
        else  if(phone.value === '' || phone.value.toString().length !== 11) {Toast.fail('请填写正确的十一位手机号码');}
        else {
            
        }


    }
    // 返回上一级
    const back = () => history.back();
    return {
      name,
      result,
      phone,
      detail,
      areaList,
      showArea,
      onConfirm,
      submitaddress,
      back
      
    };
  },
};
</script>

<style>
.form {
  margin: 30px;
  display: flex;
  font-size: 15px;
  align-items: center;
}
.addresstext {
  font-size: 16px;
  font-weight: bold;
}
.input {
  border-radius: 14px;
  width: 480px;
  height: 80px;
}
.select {
  font-size: 16px;
  font-weight: bold;
  color: #000;
  margin-left: 20px;
  padding-right: 80px;
}
.textarea {
  border-radius: 14px;
  width: 480px;
  height: 180px;
}
.box {
    position: fixed;
    width: 800px;
    height: 800px;
    background:#fff;
    top: 90%;
    z-index: 7;
}
.bigbtn {
    margin: 20px;
    width: 700px;
    height: 80px;
    border-radius: 20px;
}
.van-toast--fail {
    width: 200px;
    height: 200px;
}
.back-arrow {
    margin: 20px 0 0 10px;
}
</style>